<script setup>
import { ElMessage } from "element-plus";
const isLoading = ref(false);
const refForm = ref();
const form = ref({
  name: undefined,
  company: undefined,
  phone: "",
  creditCode: undefined,
  exhibits: undefined,
  exhiarea: undefined,
  euDefine: "官网",
  defineName: "官网",
  urlsId: 7938,
  loginId: 6233,
  expoId: 1074,
});
const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  company: [
    {
      required: true,
      message: "请输入公司（单位）名称",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号",
      trigger: "change",
    },
  ],
});
function goBack() {
  window.history.back();
}
async function confirmForm() {
  try {
    await refForm.value.validate();
  } catch (err) {
    ElMessage.error("请填写完整信息");
    return;
  }
  const data = await getFetchData({
    url: "https://reg.dataexpo.com.cn/custom/exhiCustomerUser/addExhiUserInfor",
    opts: {
      ...form.value,
    },
    method: "post",
  });
  ElMessage.success(data.msg);
}
</script>

<template>
  <div class="upback-img">
    <div class="top-img">
      <img src="@/assets/images/up.png" alt="" />
    </div>
    <div class="form-box">
      <el-form
        label-position="top"
        :rules="rules"
        ref="refForm"
        label-width="80px"
        :model="form"
      >
        <el-form-item prop="name" label="姓名">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="company" label="公司（单位）名称">
          <el-input
            v-model="form.company"
            clearable
            placeholder="请输入公司(单位)名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码">
          <el-input
            v-model="form.phone"
            clearable
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="creditCode" label="社会信用代码">
          <el-input
            v-model="form.creditCode"
            clearable
            placeholder="请输入社会信用代码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="exhibits" label="参展展品">
          <el-input
            v-model="form.exhibits"
            clearable
            placeholder="请输入参展展品"
          ></el-input>
        </el-form-item>
        <el-form-item prop="exhiarea" label="参展面积">
          <el-input
            v-model="form.exhiarea"
            clearable
            placeholder="请输入参展面积"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box pd-b-108">
        <el-button @click="goBack" type="warning">返 回</el-button>
        <el-button type="warning" :loading="isLoading" @click="confirmForm"
          >提 交</el-button
        >
      </div>
    </div>
  </div>
</template>
<style scoped>
body {
  background-color: #fff;
}
.upback-img {
  background-image: url("../../assets/images/up3.png");
  background-size: 100% 100%;
  padding-top: 7.2vw;
}
.top-img,
.form-box {
  padding-left: 30.521vw;
}
.top-img {
  width: 19vw;
}
.top-img img {
  width: 100%;
}
.form-box {
  width: 36.979vw;
  margin-top: 2.604vw;
}
:deep(.el-input__inner) {
  background-color: transparent;
  /* border: 0.052vw solid #a4a4a4; */
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
:deep(.el-form-item__label) {
  line-height: 1;
}
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-top: 4.167vw;
}
.btn-box .el-button {
  width: 48%;
  border-radius: 0;
  color: #fff;
  font-size: 20px;
}
.pd-b-108 {
  padding-bottom: 5.625vw;
}
:deep(.el-dialog) {
  border-radius: 16px;
}
.dia-tt {
  text-align: center;
  margin-bottom: 10px;
}
:deep(.el-dialog__body) {
  font-size: 18px;
  color: #000;
}
@media (max-width: 768px) {
  .upback-img {
    padding-top: 13.167vw;
    height: auto;
  }
  .form-box {
    width: 90%;
    margin: 0 5%;
    margin-top: 6.667vw;
  }
  .top-img,
  .form-box {
    padding-left: 0;
  }
  .top-img {
    width: 70vw;
    padding-left: 5%;
  }
  :deep(.el-dialog) {
    width: 90% !important;
  }
  .btn-box .el-button {
    font-size: 16px;
  }
}
</style>
